<template>
  <div class="knowledgeContentDetail">
    <ContentWrap>
      <div class="detail_container">
        <h2>{{ formData.title }}</h2>
        <p>关键词：{{ formData.keywordStr }}</p>
        <p
          class="cTime"
        >{{ (formData.createTime?formData.createTime.substring(0,19):'')+' '+formData.createrName }}</p>
        <div class="detail_msg">
          <span>阅读次数:{{ formData.score }}</span>
          <span>编辑人:{{ formData.lastUpdateName }}</span>
          <i style="flex-grow:1"></i>
          <span title="正文作为短信内容发送" class="sendSms" @click="sendSms">
            <i class="el-icon-chat-dot-square"></i> 短信
          </span>
        </div>
        <div class="detail_content">
          {{ formData.content }}
        </div>
        <p class="annexTitle">附件</p>
        <div class="annex">
          <a v-for="(a,i) in formData.annexList||[]" :key="i" href="javascript:void(0)" @click="e=>{aClickHandle(e, a)}">{{ a.fileName }}</a>
        </div>
      </div>
    </ContentWrap>
    <PreviewImage v-model="previewShow" :image-list="imageList"></PreviewImage>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import { contentDetail } from '@/api/knowledgeBase'
import PreviewImage from '@/components/PreviewImage'
import { downFileByA } from '@/utils'
export default {
  name: 'KnowledgeContentDetail',
  components: {
    ContentWrap,
    PreviewImage
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      formData: {},
      previewShow: false,
      imageList: []
    }
  },
  watch: {
    id(v) {
      this.$nextTick(() => {
        this.contentDetail()
      })
    }
  },
  mounted() {
    this.contentDetail()
  },
  methods: {
    // 获取详情
    contentDetail() {
      const id = this.id || this.$route.query.id
      if (!id) return
      contentDetail(id).then(res => {
        this.formData = res.data
      })
    },
    // 前往发送短信，需携带正文
    sendSms() {
      this.$router.push({
        name: 'SMSSend',
        query: { content: this.formData.content }
      })
    },
    // 附件预览
    aClickHandle(e, file) {
      e.preventDefault()
      if (!/(png$)|(jpg$)|(gif$)|(jpeg$)|(bmp$)/.test(file.filePath)) {
        let fileName = file.fileName
        if (!file.fileName.includes('.')) {
          fileName = `${fileName}.${file.fileType}`
        }
        downFileByA('/img/' + file.filePath, fileName)
        return
      }
      const t = this.formData.annexList
      this.imageList = t.map(e => {
        return {
          url: e.filePath,
          name: e.fileName
        }
      }).filter(e => {
        return /(png$)|(jpg$)|(gif$)|(jpeg$)|(bmp$)/.test(e.url)
      })
      this.previewShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.detail_container {
  position: relative;
  > h2,
  > p {
    margin: 0;
    text-align: center;
  }
  > p {
    margin: 12px;
    color: #999;
  }
  .cTime {
    text-align: right;
  }
  .detail_msg {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    span {
      margin-right: 30px;
    }
    .sendSms {
      margin: 0;
      color: #16bc83;
      cursor: pointer;
    }
  }
  .detail_content {
    padding: 20px 0;
  }
  .annex{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    &>a + a{
      padding-top: 5px;
    }
  }
  .annexTitle{
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-align: left;
    color: #16bc83;
    padding-bottom: 10px;
  }
}
</style>
